<template>
  <div class="q-pa-md">
    <t-quick-filter
      ref="refQuickFilter"
      :filterFields="filterFields"
      :quickItems="quickItems"
      :quickItemSummary="quickItemSummary"
      @init="onInitHandler"
      @querySummary="onQuerySummaryHandler"
    ></t-quick-filter>

    <div style="color: blue">
      <!-- {{ refQuickFilter?.groupColumnStatement }}
      {{ refQuickFilter?.filterStatement }} -->
      <fieldset>
        <legend>quickItems</legend>
        {{ quickItems }}
      </fieldset>
      <fieldset>
        <legend>quickItemSummary</legend>
        {{ quickItemSummary }}
      </fieldset>
    </div>

    <fieldset>
      <legend>方法调用</legend>
      <t-button
        label="获取过滤字符串"
        class="tr-button-primary"
        @click="msg = refQuickFilter.getFilters(ADVANCED_FILTER)"
      />
    </fieldset>

   <t-textarea
      v-model="msg"
      :borderless="true"
      labelPosition="top"
      label="过滤字符串"
    />

  </div>
</template>

<script>
import { useQuasar } from '@teld/q-components';
import { computed, ref } from 'vue';

export default {
  setup() {
    const $q = useQuasar();

    const refQuickFilter = ref(null);
    const quickItems = ref({});
    const quickItemSummary = ref({});

    const onInitHandler = () => {
      /**
       * 这里进行SDO数据的情况
       * 1.根据 refQuickFilter.value?.filterItemsIsSDO 数组批量请求SDO数据
       *  filterItemsIsSDO 的接口参考 filterFields里的值
       * 2.并将结果赋值给变量 quickItems 属性绑定的变量
       * 3. quickItems 的 结构
       * {
         "AAA": [ { "label": "隐藏", "value": "隐藏" }, { "label": "中文", "value": "CN" }, ...]
         "BBB": [ { "label": "隐藏", "value": "隐藏" }, { "label": "中文", "value": "CN" } ]
         ...
       * }
       */

      /** 示例代码 */
      let result = {};
      refQuickFilter.value?.filterItemsIsSDO.forEach(f => {
        result[f.fieldAlias] = [
          { label: '状态-0', value: '0' },
          { label: '状态-1', value: '1' },
          { label: '英文-2', value: '2' },
        ];
      });
      quickItems.value = result;
    };

    const onQuerySummaryHandler = filterExpression => {
      /** 统计数据
       * 调用绑定的数据源 进行 使用 入参 filterExpression 进行 DQ 查询
       * https://alidocs.dingtalk.com/i/nodes/14dA3GK8gkwY35ADTjvYgP3j89ekBD76?doc_type=wiki_doc&iframeQuery=utm_source%3Dportal%26utm_medium%3Dportal_recent&rnd=0.12017852477600766# 「快捷筛选组件设计」
       *
       * 返回的结构 赋值给 quickItemSummary 属性绑定的变量
       */

      console.log('onQuerySummaryHandler', filterExpression);
      let mockSummary = refQuickFilter.value.mockSummary;
      quickItemSummary.value = refQuickFilter.value.wrapSummary([
        { Total: mockSummary(), State: '0', State2: '0' },
        { Total: mockSummary(), State: '1', State2: '2' },
        { Total: mockSummary(), State: '2', State2: 'CN' },
        { Total: mockSummary(), State: 'CN', State2: 'CN' },
        { Total: mockSummary(), State: 'EN', State2: 'EN' },
        { Total: mockSummary(), State: 'EN', State2: 'EN' },
      ]);
    };

    const filterFields = ref([
      {
        ID: '7a7842d3-1169-4c23-b7ac-b3856c6906c4',
        tableAlias: 'DO_do_projectbug_cj121801',
        tableCode: 'DO_do_projectbug_cj121801',
        tableName: 'do_projectbug_cj121801',
        fieldCode: 'State',
        fieldName: '状态',
        fieldAlias: 'State',
        displayType: 'tab',
        mockDataModel: 'default',
        isMultiple: true,
        enableStatistics: true,
        enableAllItem: true,
        hideEmpty: true,
        showTitle: false,
        dataType: 'Int',
        valueType: 'sdo',
        filter_dataValue:
          '{"DataBind":"DataQuery.GetSDO_statemachinetest_selectBasicList(DefaultInputFilter,PageIndex,PageSize,AdvancedFilter,AdvancedSort).List","DataSource":"5030e87f-3250-4c3f-a839-bbf18630b57e","ActionType":3,"RelatedCdoCode":"GetSDO_statemachinetest_selectBasicList","ServicePara":[{"ID":"d149d54e-dce5-42ba-a845-e1b0526b63b1","Code":"DefaultInputFilter","Name":"模糊匹配参数","DataType":9,"IsEmpty":0,"Value":""},{"ID":"7462d708-6ee5-43cd-82ce-47cd37fb8bd8","Code":"PageIndex","Name":"页码","DataType":2,"IsEmpty":0,"Value":""},{"ID":"262e9b92-6a97-49f8-ae77-ae5c7d91737b","Code":"PageSize","Name":"分页大小","DataType":2,"IsEmpty":0,"Value":""},{"ID":"35fd7cf3-5fd7-4ac3-9e75-558222989dc1","Code":"AdvancedFilter","Name":"高级查询过滤条件","DataType":9,"IsEmpty":0,"Value":""},{"ID":"f47251eb-5371-4872-8350-f71a032e7d83","Code":"AdvancedSort","Name":"高级查询排序条件","DataType":9,"IsEmpty":0,"Value":""}],"isMultiple":false,"labelField":"Name","valueField":"Code","columns":[{"ID":"Code","dataField":"Code","caption":"编号","dataType":"Int"},{"ID":"Name","dataField":"Name","caption":"名称","dataType":"String"}],"ServiceParam":[{"ID":"d149d54e-dce5-42ba-a845-e1b0526b63b1","Code":"DefaultInputFilter","Name":"模糊匹配参数","DataType":9,"IsEmpty":0,"Value":""},{"ID":"7462d708-6ee5-43cd-82ce-47cd37fb8bd8","Code":"PageIndex","Name":"页码","DataType":2,"IsEmpty":0,"Value":""},{"ID":"262e9b92-6a97-49f8-ae77-ae5c7d91737b","Code":"PageSize","Name":"分页大小","DataType":2,"IsEmpty":0,"Value":""},{"ID":"35fd7cf3-5fd7-4ac3-9e75-558222989dc1","Code":"AdvancedFilter","Name":"高级查询过滤条件","DataType":9,"IsEmpty":0,"Value":""},{"ID":"f47251eb-5371-4872-8350-f71a032e7d83","Code":"AdvancedSort","Name":"高级查询排序条件","DataType":9,"IsEmpty":0,"Value":""}]}',
      },
      {
        ID: '7a7842d3-1169-4c23-b7ac-bool',
        tableAlias: 'DO_do_projectbug_cj121801',
        tableCode: 'DO_do_projectbug_cj121801',
        tableName: 'do_projectbug_cj121801',
        fieldCode: 'bool',
        fieldName: '逻辑值',
        fieldAlias: 'bool',
        displayType: 'tab',
        mockDataModel: 'default',
        isMultiple: false,
        enableStatistics: false,
        hideEmpty: false,
        showTitle: false,
        dataType: 'Int',
        valueType: 'boolean',
        filter_dataValue: '',
      },
      {
        ID: '7a7842d3-1169-4c23-b7ac-bool',
        tableAlias: 'DO_do_projectbug_cj121801',
        tableCode: 'DO_do_projectbug_cj121801',
        tableName: 'do_projectbug_cj121801',
        fieldCode: 'date',
        fieldName: '日期',
        fieldAlias: 'date',
        displayType: 'tab',
        mockDataModel: 'default',
        isMultiple: false,
        enableStatistics: false,
        hideEmpty: false,
        showTitle: false,
        dataType: 'Int',
        valueType: 'date',
        filter_dataValue: '',
      },
      {
        ID: '7a7842d3-1169-4c23-b7ac-b3856c6906c4',
        tableAlias: 'DO_do_projectbug_cj121801',
        tableCode: 'DO_do_projectbug_cj121801',
        tableName: 'do_projectbug_cj121801',
        fieldCode: 'State2',
        fieldName: '状态2',
        fieldAlias: 'State2',
        displayType: 'tab',
        mockDataModel: 'default',
        isMultiple: false,
        enableStatistics: false,
        hideEmpty: false,
        showTitle: false,
        dataType: 'Int',
        valueType: 'sdo',
        filter_dataValue:
          '{"DataBind":"DataQuery.GetSDO_statemachinetest_selectBasicList(DefaultInputFilter,PageIndex,PageSize,AdvancedFilter,AdvancedSort).List","DataSource":"5030e87f-3250-4c3f-a839-bbf18630b57e","ActionType":3,"RelatedCdoCode":"GetSDO_statemachinetest_selectBasicList","ServicePara":[{"ID":"d149d54e-dce5-42ba-a845-e1b0526b63b1","Code":"DefaultInputFilter","Name":"模糊匹配参数","DataType":9,"IsEmpty":0,"Value":""},{"ID":"7462d708-6ee5-43cd-82ce-47cd37fb8bd8","Code":"PageIndex","Name":"页码","DataType":2,"IsEmpty":0,"Value":""},{"ID":"262e9b92-6a97-49f8-ae77-ae5c7d91737b","Code":"PageSize","Name":"分页大小","DataType":2,"IsEmpty":0,"Value":""},{"ID":"35fd7cf3-5fd7-4ac3-9e75-558222989dc1","Code":"AdvancedFilter","Name":"高级查询过滤条件","DataType":9,"IsEmpty":0,"Value":""},{"ID":"f47251eb-5371-4872-8350-f71a032e7d83","Code":"AdvancedSort","Name":"高级查询排序条件","DataType":9,"IsEmpty":0,"Value":""}],"isMultiple":false,"labelField":"Name","valueField":"Code","columns":[{"ID":"Code","dataField":"Code","caption":"编号","dataType":"Int"},{"ID":"Name","dataField":"Name","caption":"名称","dataType":"String"}],"ServiceParam":[{"ID":"d149d54e-dce5-42ba-a845-e1b0526b63b1","Code":"DefaultInputFilter","Name":"模糊匹配参数","DataType":9,"IsEmpty":0,"Value":""},{"ID":"7462d708-6ee5-43cd-82ce-47cd37fb8bd8","Code":"PageIndex","Name":"页码","DataType":2,"IsEmpty":0,"Value":""},{"ID":"262e9b92-6a97-49f8-ae77-ae5c7d91737b","Code":"PageSize","Name":"分页大小","DataType":2,"IsEmpty":0,"Value":""},{"ID":"35fd7cf3-5fd7-4ac3-9e75-558222989dc1","Code":"AdvancedFilter","Name":"高级查询过滤条件","DataType":9,"IsEmpty":0,"Value":""},{"ID":"f47251eb-5371-4872-8350-f71a032e7d83","Code":"AdvancedSort","Name":"高级查询排序条件","DataType":9,"IsEmpty":0,"Value":""}]}',
      },
    ]);

    const msg = ref();

    return {
      msg,
      refQuickFilter,
      filterFields,
      quickItems,
      quickItemSummary,
      onInitHandler,
      onQuerySummaryHandler,
    };
  },
};
</script>
